<template>
    <div id="contentMargin">
        <!--头部分类-->
        <div id="cate">
            <ul v-bind="{style:'width:'+ulWidth+'px'}">
                <li @click="getimgs(0)">全部</li>
                <li v-for="item in cates" @click="getimgs(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <!--图片-->
        <div id="imglist">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                        <img v-lazy="item.img_url">
                        <div id="desc">
                            <h5 v-text="item.title"></h5>
                            <p v-text="item.zhaiyao"></p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import common from "../../kits/common";
    //    import { Lazyload } from 'mint-ui';
    //    Vue.use(Lazyload);
    export default {
        data() {
            return {
                ulWidth: 20,
                cates: [
                    {
                        "title": "分类1",
                        "id": 14
                    }, {
                        "title": "分类2",
                        "id": 14
                    }, {
                        "title": "分类3",
                        "id": 14
                    }, {
                        "title": "分类4",
                        "id": 14
                    }, {
                        "title": "分类5",
                        "id": 14
                    }, {
                        "title": "分类6",
                        "id": 14
                    }, {
                        "title": "分类7",
                        "id": 14
                    }, {
                        "title": "分类8",
                        "id": 14
                    }, {
                        "title": "分类9",
                        "id": 14
                    }
                ],
                list: [
                    {
                        "id": 14,
                        "title": "this is title1",
                        "img_url": "../../../statics/imgs/img1.jpg",
                        "zhaiyao": "this is short content1"
                    }, {
                        "id": 15,
                        "title": "this is title2",
                        "img_url": "../../../statics/imgs/img2.jpg",
                        "zhaiyao": "this is short content2"
                    }, {
                        "id": 16,
                        "title": "this is title3",
                        "img_url": "../../../statics/imgs/img3.jpg",
                        "zhaiyao": "this is short content3"
                    }, {
                        "id": 17,
                        "title": "this is title4",
                        "img_url": "../../../statics/imgs/img4.jpg",
                        "zhaiyao": "this is short content4"
                    }, {
                        "id": 18,
                        "title": "this is title5",
                        "img_url": "../../../statics/imgs/img5.jpg",
                        "zhaiyao": "this is short content5"
                    }, {
                        "id": 19,
                        "title": "this is title6",
                        "img_url": "../../../statics/imgs/img1.jpg",
                        "zhaiyao": "this is short content6"
                    }, {
                        "id": 20,
                        "title": "this is title7",
                        "img_url": "../../../statics/imgs/img2.jpg",
                        "zhaiyao": "this is short content7"
                    }, {
                        "id": 21,
                        "title": "this is title8",
                        "img_url": "../../../statics/imgs/img3.jpg",
                        "zhaiyao": "this is short content8"
                    }
                ]
            }

        },
        created() {
//            this.getcates();
            var all = 0;
//            this.getimgs();
            this.getcount();
        },
        methods: {
            getimgs(catesid = 0) {
//                var catesid= catesid ||0;
                var url = common.apidomain + '/api/...' + catesid;
                this.$http.get(url).then(res => {
                    if (res.body.status != 0) {
                        alert(res.body.message);
                        return;
                    }
                    this.list = res.body.message;
                })
            },
            getcates() {
                var url = common.apidomain + "/api/....";
                this.$http.get(url).then(res => {
                    if (res.body.status != 0) {
                        alert(res.body.message);
                        return;
                    }
                    this.cates = res.body.message;

                    const w = 45;
                    var count = res.body.message.length + 1;
                    this.ulWidth = w * count;
                });
            },
            getcount() {
                const w = 45;
                var count = this.cates.length + 1;
                this.ulWidth = w * count;
            }
        }
    }
</script>
<style scoped>
    #cate {
        width: 320px;
        max-width: 320px;
        overflow-x: auto;
    }

    #cate ul {
        margin: 0px;
        padding-left: 10px;
    }

    #cate li {
        cursor: pointer;
        list-style: none;
        display: inline-block;
        color: #0094ff;
        font-size: 12px;
        padding-left: 8px;
    }

    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }

    #imglist {

    }

    #imglist ul {
        padding-left: 0px;
    }

    #imglist li {
        list-style: none;
        position: relative;
    }

    #imglist li img {
        width: 100%;
        height: 200px;
    }

    #desc {
        bottom: 2px;
        left: 0px;
        position: absolute;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
    }

    #desc h5 {
        color: white;
        font-weight: bold;
    }

    #desc p {
        color: white;
    }
</style>